<template>
  <div id="effective">
    <div class="tables">
      <el-table
        :data="tableData"
        class="table"
        height="100%"
        ref="jdjgTable"
        @sort-change="sortChange"
        :header-cell-style="{
          padding: '0px',
          background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
        }"
        :row-class-name="tabRowClassName"
        header-row-class-name="mapTable_th"
      >
        <el-table-column width="60" align="center" type="index" :index="addIndex" label="序号">
          <el-table-column width="60" align="center" type="index" label="检索"> </el-table-column>
        </el-table-column>
        <el-table-column label="合同编号" align="center">
          <el-table-column align="center" sortable="custom" prop="contractNo" width="150">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-select v-model.trim="searchQrcoUsed" placeholder="请选择" @change="getDataChange">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option label="已使用" :value="1"></el-option>
                  <el-option label="未使用" :value="2"></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="招标内容" align="center">
          <el-table-column align="center" sortable="custom" prop="biddingContent" width="150">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-select v-model.trim="searchQrcoUsed" placeholder="请选择" @change="getDataChange">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option label="已使用" :value="1"></el-option>
                  <el-option label="未使用" :value="2"></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="供应商名称" align="center">
          <el-table-column align="center" sortable="custom" prop="providerName" width="150">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-select v-model.trim="searchQrcoUsed" placeholder="请选择" @change="getDataChange">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option label="已使用" :value="1"></el-option>
                  <el-option label="未使用" :value="2"></el-option>
                </el-select>
              </div>
            </template>
            <template slot-scope="scope">
              <el-button type="text" class="xg czBtn" size="small" @click="checkCompony(scope.row)">
                {{ scope.row.providerName }}
              </el-button>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="合同金额(元)" align="center">
          <el-table-column align="center" prop="contractAmount" width="150"> </el-table-column>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <el-table-column align="center" sortable="custom" prop="stateDescription" width="150">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="生效时间" align="center">
          <el-table-column align="center" sortable="custom" prop="takeEffectDate" width="180">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" align="center" width="260" fixed="right">
          <el-table-column align="center" width="260">
            <template slot-scope="scope">
              <div class="">
                <el-button type="text" class="xg czBtn" size="small" @click="handleClick('查看', scope.row)">
                  查看
                </el-button>
                <el-button
                  type="text"
                  class="xg czBtn"
                  size="small"
                  @click="handleClick('修改评价', scope.row)"
                  v-if="enterpriseType != 2"
                >
                  修改评价
                </el-button>
                <el-button
                  type="text"
                  class="xg czBtn"
                  size="small"
                  @click="handleClick('下载合同', scope.row)"
                  v-if="false"
                >
                  下载合同
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="pags">
      <element-pagination @getData="getPagChange" :Total="total"> </element-pagination>
    </div>

    <el-dialog
      width="1200px"
      :center="true"
      title="查看申请完成合同"
      v-if="successVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="successVisible"
    >
      <h1>合同摘要</h1>
      <el-form label-width="130px" class="commonFrom">
        <el-form-item label="招标编号：" style="margin-bottom: 3px">
          {{ biddFrom.biddingNo }}
        </el-form-item>
        <el-form-item label="合同编号：" style="margin-bottom: 3px">
          {{ biddFrom.contractNo }}
        </el-form-item>
        <el-form-item label="定标说明：" style="margin-bottom: 17px; width: 100% !important">
          {{ biddFrom.reviewMind }}</el-form-item
        >
      </el-form>
      <h1>基本信息</h1>
      <el-form class="commonFrom" label-width="130px">
        <el-form-item label="采购商名称："> {{ biddFrom.enterpriseName }}</el-form-item>
        <el-form-item label="工程名称：" style="width: auto !important">
          <span>{{ biddFrom.proName }}</span>
          <span style="color: #fa7355; cursor: pointer; margin-left: 10px" @click="checkProDetail(biddFrom.proId)"
            >查看详情</span
          >
        </el-form-item>
        <el-form-item label="签约采购商：" class="form-item">
          <div>{{ biddFrom.contractBuyer }}</div>
        </el-form-item>
        <el-form-item label="招标内容：" style="margin-right: 400px"> {{ biddFrom.biddingContent }}</el-form-item>
        <el-form-item label="交付地点：" style="width: 100% !important">
          <div>{{ biddFrom.province }}{{ biddFrom.city }}{{ biddFrom.area }}{{ biddFrom.detailAddress }}</div>
        </el-form-item>
        <el-form-item label="合同形式：" style="width: 100% !important">
          <div>{{ biddFrom.contractForm | contractFormFilter }}</div>
        </el-form-item>
      </el-form>
      <h1>总采购清单</h1>
      <div>
        <div style="margin: 20px 0">
          <p style="margin-bottom: 20px; margin-left: 60px">
            总合计：<span style="font-size: 24px; color: #333">{{ biddFrom.contractAmount || 'xxxxx' }}</span
            >元
          </p>
          <p style="margin-left: 60px">
            已结算：<span style="font-size: 24px; color: #333; margin-left: 12px">{{ biddFrom.acceptedAmount }}</span
            >元
          </p>
        </div>
        <div class="bidding-table" style="margin-bottom: 20px; margin-left: 12px">
          <el-table
            :data="biddListTotal"
            border
            class="bidding"
            ref="jdjgTable"
            :header-cell-style="cellStyle"
            :row-class-name="tabRowClassName"
          >
            <el-table-column width="60" align="center" type="index" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="材料名称" align="center" prop="materialName" width="160"> </el-table-column>
            <el-table-column label="规格型号" align="center" prop="model" width="160"> </el-table-column>
            <el-table-column label="单位" align="center" prop="company" width="80"> </el-table-column>
            <el-table-column label="参数指标" align="center" prop="parameterIndex" width="160"> </el-table-column>
            <el-table-column label="品牌产地" align="center" prop="brandOrigin" width="160"> </el-table-column>
            <el-table-column label="数量" align="center" prop="purchaseQuantity" width="120"> </el-table-column>
            <el-table-column label="已验收数量" align="center" prop="quantityReceived" width="180"> </el-table-column>
            <el-table-column label="单价" align="center" prop="unitPrice" width="120"> </el-table-column>
            <el-table-column label="税率(%)" align="center" prop="taxRate" width="80"> </el-table-column>
            <el-table-column label="不含税金额" align="center" prop="excludingTax" width="140"> </el-table-column>
            <el-table-column label="税金" align="center" prop="taxes" width="140"> </el-table-column>
            <el-table-column label="价税合计" align="center" prop="totalPrice" width="160" fixed="right">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <h1>合同履约保证金</h1>
      <el-form class="commonFrom" label-width="130px">
        <el-form-item label="保证金金额："> {{ biddFrom.margin }}(万元) </el-form-item>
        <el-form-item label="保证金完成后退回金额：" label-width="170px">
          {{ biddFrom.depositRefund }}(万元)
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      width="553px"
      :center="true"
      title="工程详情"
      append-to-body
      class="pro_dialog"
      :close-on-click-modal="false"
      :visible.sync="projectVisible"
      v-if="projectVisible"
    >
      <el-form label-width="80px">
        <el-form-item label="工程编号: "> {{ projectFrom.proNo }}</el-form-item>
        <el-form-item label="工程名称: ">
          {{ projectFrom.proName }}
        </el-form-item>
        <el-form-item label="建设单位: ">
          {{ projectFrom.developmentUnit }}
        </el-form-item>
        <el-form-item label="施工单位: ">
          {{ projectFrom.constructUnit }}
        </el-form-item>
        <el-form-item label="监理单位: ">
          {{ projectFrom.constructControlUnit }}
        </el-form-item>
        <el-form-item label="勘察单位: ">
          {{ projectFrom.surveyUnit }}
        </el-form-item>
        <el-form-item label="设计单位: ">
          {{ projectFrom.designUnit }}
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      width="1200px"
      :center="true"
      title="修改全阶段评价"
      v-if="evaluaVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="evaluaVisible"
    >
      <whole-stage-evaluation :contractId="contractId" @closeBtn="close" :biddId="biddId"></whole-stage-evaluation>
    </el-dialog>
  </div>
</template>

<script>
import ElementPagination from '../../../../components/ElementPagination.vue'
import WholeStageEvaluation from '../components/WholeStageEvaluation.vue'
export default {
  data() {
    return {
      biddId: null,
      enterpriseType: localStorage.getItem('enterpriseType'),
      contractId: null,
      evaluaVisible: false,
      projectFrom: {},
      projectVisible: false,
      biddListTotal: [],
      successVisible: false,
      biddFrom: {},
      searchQrcoUsed: '',
      searchPositionName: '',
      tableData: [],
      total: 0,
      size: 15,
      page: 1
    }
  },
  components: { ElementPagination, WholeStageEvaluation },
  mounted() {
    this.getData()
  },
  filters: {
    contractFormFilter(val) {
      switch (val) {
        case 1:
          return '固定总价'
        case 2:
          return '固定单价'
        case 3:
          return '可调总价'
        case 4:
          return '可调单价'
        case 5:
          return '用户自定义'
        default:
          break
      }
    }
  },
  methods: {
    checkCompony(row) {
      const { bidCompanyId } = row
      if (bidCompanyId) {
        localStorage.setItem('supplierID', bidCompanyId)
        const { href } = this.$router.resolve({ name: 'SupplierDetail', query: { id: bidCompanyId } })

        window.open(href, '_blank')
      }
    },
    close() {
      this.evaluaVisible = false
    },
    // 查看工程详情
    checkProDetail(id) {
      this.projectFrom = {}
      this.$https({
        method: 'post',
        url: '/government/listProjectByProjectId?projectId=' + id
      })
        .then(res => {
          if (res.code === 0) {
            this.projectFrom = res.data
            this.projectVisible = true
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 7) {
        //指定坐标
        return 'background: #fff4f2'
      } else {
        return { padding: '0px', background: '#F2F3F7' }
      }
    },
    getFrom(id) {
      this.$https({
        method: 'post',
        url: '/contract/queryContract',
        data: {
          id: id
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.biddFrom = res.data
            this.biddListTotal = [...(res.data.withinTheContract || []), ...(res.data.outsideTheContract || [])]
            this.successVisible = true
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    closeDialog(done) {
      done()
    },
    handleClick(val, scope) {
      if (val === '查看') {
        this.getFrom(scope.id)
      } else if (val === '下载合同') {
      } else {
        this.evaluaVisible = true
        this.contractId = scope.id
        this.biddId = scope.biddingId
      }
    },
    getDataChange() {},
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.getData()
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/contract/queryContractList',
        data: {
          page: this.page,
          size: this.size,
          state: 3
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.total = res.data.total
            this.tableData = res.data.records
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    sortChange() {},
    addIndex(index) {
      return index + 1 + (this.page - 1) * this.size
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
}
</script>
<style lang="less" scoped>
#effective {
  height: 100%;
  .tables {
    height: calc(100% - 62px);
  }
}
.xg {
  color: #166df1;
}
.ty {
  color: #ff3d3d;
}
.commonFrom {
  margin-top: 7px;
  width: 88%;
  .el-form-item {
    width: 40% !important;
    margin-bottom: 7px !important;
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
    .el-input {
      width: 260px;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
</style>
